<script setup lang="ts">
import {onMounted, ref} from "vue";
import {useRouter} from "vue-router";
import {getVerification} from "@/api/path/message";
import {useVerify} from "@/stores/verify";
const router = useRouter();
const v = useVerify();
// mock
interface invitation {
  enterpriseName: string,
  verifyId: string,
  position: string,
  enterpriseId: string,
}
const enterpriseList = ref<invitation[]>([])
const handleToEnterprise = (eid: string, vid: number) => {
  v.setVid(vid);
  router.push({
    path: '/enterprise',
    query: {
      enterpriseId: eid
    }
  })
}
onMounted(() => {
  getVerification().then(res => {
    enterpriseList.value = res.verificationList;
  })
})
</script>

<template>
  <span class="main-wrapper">
    <span class="message-wrapper">
      <span v-for="v in enterpriseList" :key="v.verifyId" class="msg">
        {{v.enterpriseName}}邀请您成为{{v.position}},
        <span class="btn" @click="handleToEnterprise(v.enterpriseId, v.verifyId)">点我去企业</span>
      </span>
      <span v-if="enterpriseList.length == 0" class="no-message">
        暂无消息
      </span>
    </span>
  </span>

</template>

<style scoped>
.main-wrapper {
  display: flex;
  justify-content: center;
  height: calc(100% - var(--guide-height));
  overflow-y: auto;
  width: 100%;
  background-color: var(--color-light);
  .message-wrapper {
    display: flex;
    flex-direction: column;
    width: 500px;
    margin: 30px;
    border-radius: 15px;
    background-color: white;
    border: 2px solid var(--color-plain);
    padding: 10px 20px 20px 20px;
    .msg {
      margin-top: 10px;
      padding: 0 10px;
      display: flex;
      line-height: 30px;
      height: 30px;
      border-radius: 10px;
      border: 1px solid grey;
      .btn {
        &:hover {
          cursor: pointer;
          text-decoration: underline;
          color: var(--color-primary);
        }
      }
    }
  }
}
.no-message {
  display: flex;
  margin-top: 100px;
  justify-content: center;
}

</style>